<template>
  <div id="main" v-loading="loading">
    <div class="box-card   boxBlock" v-if="userInfo" style="margin-top: 0;">
      <div  class="dialogItem" v-if="userInfo.userType != '00'"> 
        <span>我的信息</span> 
      </div>
      <el-form
        class="padding-r35"
        label-width="200px"
        label-position="right"
        :model="userInfo"
        ref="userInfo"
        :rules="regFormRulesU"
        v-if="userInfo"
        style="margin:20px 0;width:500px"
      >
        <el-form-item label="用户:" prop="userName">
          <el-input v-model="userInfo.userName"  :disabled="userInfo.userType == '00'||userInfo.userType == '03'"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phonenumber" > 
          <el-input v-model="userInfo.phonenumber" :disabled="userInfo.userType == '00'||userInfo.userType == '03'"></el-input>
        </el-form-item>
    
        <el-form-item label="是否为代理商:" prop="phonenumber" v-if="userInfo.agent">
              是<el-tooltip class="item" effect="dark" content="复制链接注册会员后成为该客户的下级客户" placement="top">
                    <el-button
                      size="mini" plain 
                      v-copy="`${hostname}#/register?invitationCode=${userInfo.userId}`"  
                      style="margin-left: 10px; color:#fff" type="primary"  
                    >
                    复制
                  </el-button>
                </el-tooltip> 
        </el-form-item> 
        <el-form-item
          v-if="userInfo.userType != '00'"
          label="收款码:"
         
          prop="receivingCode"
        >
          <el-input v-model="userInfo.receivingCode" disabled></el-input>
        </el-form-item>
        <el-form-item
          v-if="userInfo.userType != '00'&& userInfo.userType != '03'"
          label="性别:"
         
          prop="sex"
        >
          <el-radio-group v-model="userInfo.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="userInfo.userType != '00'&& userInfo.userType != '03'"
          label="邮箱:"
         
          prop="email"
        >
          <el-input
            v-model="userInfo.email"
            placeholder="xxxx@xxxx."
          ></el-input>
        </el-form-item>
        <el-form-item label="修改密码:" prop="password">
          <el-input
            type="password"
            placeholder="修改密码"
            v-model="userInfo.password"
            show-password
          ></el-input>
        </el-form-item> 
        <el-form-item label="再次修改密码:" prop="password2" v-if="userInfo.userType === '00' || userInfo.userType === '03'">
          <el-input
            type="password"
            placeholder="再次修改密码"
            v-model="userInfo.password2"
            show-password
          ></el-input>
        </el-form-item>
        <div v-if="userInfo.userType != '00'&& userInfo.userType != '03'">
          <el-form-item label="账户名称:" prop="bankAccountName">
            <el-input v-model="userInfo.bankAccountName"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号:" prop="bankCardNumber">
            <el-input v-model="userInfo.bankCardNumber"></el-input>
          </el-form-item>
          <el-form-item label="开户行名称:" prop="bankName">
            <el-input v-model="userInfo.bankName"></el-input>
          </el-form-item>
        </div>

        <el-form-item> </el-form-item>
        <el-form-item class="wid-8 aline-c">
          <el-button type="primary" @click="referU" :disabled="disabledU" >
            修改密码
          </el-button>
          <!-- v-if="userInfo.userType == '00'||userInfo.userType == '03'" -->
          <!-- <el-button type="primary" @click="referU" :disabled="disabledU">
             {{ userInfo.userType == '00'||userInfo.userType == '03'?'修改密码':'更新信息' }}
          </el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam"></codeChoose>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  phoneReg,
  emailReg,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  reqJson
} from "../../api/axiosFun";
var validbankName = (rule, value, callback) => {
  var myreg = /^[\u4e00-\u9fa5]{4,20}$/;
  if (!myreg.test(value)) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  if (!value.includes("银行")) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  if (!value.includes("支行")) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  return callback();
};
export default {
  data() {
    return {
      userInfo: null,
      baseURL: baseURL,
      loading: false,
      disabledU: false,
      regFormRulesU: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phonenumber: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            pattern: phoneReg,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        email: [
          {
            pattern: emailReg,
            required: false,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        bankAccountName: [
          { required: true, message: "请输入账户名称", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{2,8}$/,
            message: "请输入正确的账户名称",
            trigger: "blur",
          },
        ],
        bankCardNumber: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            // pattern: /^\d{16}|\d{19}$/,
            pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/,
            message: "请输入正确的银行卡号",
            trigger: "blur",
          },
        ],
        bankName: [
          { required: true, message: "请输入开户行名称", trigger: "blur" },
          { validator: validbankName },
        ],
      },
       hostname:"https://dev.novalinkpay.com/" ,
      //  hostname: 'https://vip.novalinkpay.com/', 
      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      fd:'',
      headers:''
    };
  },
  components: { 
    codeChoose
  },
  created() {  
    if (this.$store.state.user) {
      this.userInfo = JSON.parse(this.$store.state.user);
      
    } else {
      this.getInfo();
    }
  },
  computed: {
    ...mapGetters(["getUser"]),
    ...mapGetters(["getcInfo"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
  },
  methods: {
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
            if(this.userInfo&&this.userInfo.verifyApi){
              this.verArry =  this.userInfo.verifyApi.split(',');
            } 
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getParam(val,type){  
      this.headers = val ;  
      this.referUShowPwd();
    },  
    referUShowPwd(){
      reqJson('post',"/api/photon/editSensitiveInfo",{ 
        email:this.userInfo.email,
        password:encrypt(this.userInfo.password),
        phonenumber:this.userInfo.phonenumber, 
      },{
          headers:{
            ...this.headers
          }
        })   
      // service
      //     .post("/api/photon/editUserInfo", this.userInfo)
        .then((res) => {
          this.disabledU = false;
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getInfo();
          } else {
            this.userInfo.password = "";
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    referU() {
      this.$refs.userInfo.validate((valid) => {
        if (!valid) return;  
 
        if(this.userInfo.password2!=this.userInfo.password){
          return  this.$message({
              type: "error",
              message: '两次密码不一致',
            });
        } 
        if(this.userInfo.password&&this.userInfo.password.length<6){
          return this.$message({
              type: "error",
              message: '密码不能少于6位',
          });
        }
        if (this.userInfo.password) {
          
          // this.userInfo.password = encrypt(this.userInfo.password);
        } else {
          return this.$message({
              type: "error",
              message: '密码不能为空',
            });
          delete this.userInfo.password;
        }
        this.disabledU = true;
        this.$refs.codeRef.openDialog(); 
        this.verType = 'add'
        // service
        //   .post("/api/photon/editUserInfo", this.userInfo)
        //   .then((res) => {
        //     this.disabledU = false;
        //     if (res.code == 0) {
        //       this.$message({
        //         type: "success",
        //         message: res.msg,
        //       });
        //       this.getInfo();
        //     } else {
        //       this.userInfo.password = "";
        //       this.$message({
        //         type: "info",
        //         message: res.msg,
        //       });
        //     }
        //   })
        //   .catch((err) => {
        //     this.$message.error(err);
        //   });
      });
    },
  },
  directives: {
    // 注册一个复制指令
    copy: {
      bind(el, { value }) {
        el.handler = () => {
          if (!value) {
            console.error('需要复制的内容不能为空'); 
            return;
          }
          const input = document.createElement('input');
          input.value = value;
          document.body.appendChild(input);
          input.select();
          document.execCommand('copy');
          document.body.removeChild(input);
          alert('复制成功！') 
        }; 
        el.addEventListener('click', el.handler);
      },
      unbind(el) {
        el.removeEventListener('click', el.handler);
      },
    },
  },
};
</script>

<style scoped>
#main .box-card .el-form-item {
  /* display: inline-block; */
  /* margin-left: 5%; */
}
.box-card h2 {
  margin: 0;
}
.box-card .item .item-name {
  font-size: 35px;
  line-height: 80px;
}
.box-card .item .item-ts {
  font-size: 12px;
  font-weight: 500;
  color: #949494;
}
.el-upload .avatar {
  margin-left: -15px;
  margin-top: -15px;
  width: 180px;
  height: 180px;
  display: block;
}
.el-image {
  margin-top: 20px;
  width: 180px;
  height: 180px;
}
</style>
